<template>
	<view class="box">
		<!-- 头部 -->
		<van-nav-bar title="等待买家付款" left-text="返回" left-arrow @click-left="onClickLeft" />
		<!-- 地址 -->
		<view class="address">
			<div class="top">
				<van-icon name="location-o" />
				<text class="name">{{address.name}}</text>
				<text class="phone">86-{{address.tel}}</text>
			</div>
			<div class="bottom">
				<text class="pro">{{address.province}}</text>
				<text>{{address.city}}</text>
				<text>{{address.county}}</text>
				<text>{{address.addressDetail}}</text>
			</div>
		</view>
		<!-- 商品 -->
		<div class="goods">
			<van-swipe-cell v-for="item in userList" :key="item.id">
				<van-card :num="item.num" :price="item.goods_price" :desc="item.goods_styles" :title="item.goods_name"
					class="goods-card" :thumb="item.goods_images" />
			</van-swipe-cell>
			<div class="total">应付：
				<text>￥{{total}}</text>
			</div>
		</div>
		<div class="order-info">
			<div class="order">
				<view class="order-time">
					下单时间：{{time}}
				</view>
			</div>
			<div class="order">
				<view class="order-time">
					商品快照：核对商品交易细节时，可以作为判断依据
				</view>
			</div>
		</div>
		<view class="footer">
			<van-action-bar>
				<div class="total price">应付：
					<text>￥{{total}}</text>
				</div>
				<van-action-bar-button type="danger" text="立即支付" @click="pay(total)" />
			</van-action-bar>
		</view>
		<!-- 底部 -->
		<my-config></my-config>
	</view>
</template>

<script>
	// 导入api
	import api from "../../../api/api.js";
	import {
		showDialog
	} from 'vant';
	export default {
		data() {
			return {
				address: "",
				order_info: "",
				payUrl: "",
				userList: [],
				time: "",
				key_id: ""
			}
		},
		methods: {
			onClickLeft() {
				history.back();
			},
			// 获取订单
			getOrder(option) {
				api.getOrder(option).then(res => {
					if (res.data.data.success == "订单已失效，请重新下单！") return history.back();;
					this.order_info = res.data.data.order_info;
					this.address = res.data.data.address;
					this.time = res.data.data.time;
					this.key_id = res.data.data.key_id;
					for (var i = 0; i < this.order_info.length; i++) {
						this.userList.push(this.order_info[i].goods_info);
					}
				})
			},
			// 支付
			pay(total) {
				api.pay({
					key_id: this.key_id,
					price: total
				}).then(res => {
					this.payUrl = res.data.data.alipay_url;
					setTimeout(() => {
						location.href = this.payUrl;
					}, 1000);
				})
			}
		},
		onLoad(option) {
			this.getOrder(option);
		},
		computed: {
			total() {
				var t = 0;
				this.userList.forEach(item => {
					t += item.goods_price * item.num;
				});
				return t.toFixed(2);
			}
		}
	}
</script>

<style>
	.box {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* 头部 */
	.top {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	.address {
		margin: 10rpx auto;
		width: 97%;
		background-color: white;
		border-radius: 10px;
	}

	.address .top {
		width: 90%;
		height: 40px;
		margin: 0 auto;
		text-align: left;
	}

	.address .top .name {
		font-size: 30rpx;
		margin-left: 5px;
	}

	.address .top .phone {
		color: #505050;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.address .bottom {
		width: 79%;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	.pro {
		margin-left: 0px !important;
	}

	.address .bottom text {
		color: #505050;
		font-size: 24rpx;
		margin-left: 10px;
	}

	.goods {
		margin: 10rpx auto;
		width: 97%;
		border-radius: 10px;
	}

	.total {
		margin-top: 10px;
		height: 50rpx;
		color: #505050;
		font-size: 24rpx;
		text-align: right;
	}

	.total text {
		margin-right: 20px;
		color: rgb(253, 80, 47) !important;
		font-size: 30rpx;
	}

	.order-info {
		margin-top: 30rpx;
		width: 100%;
		height: 120px;
		color: #505050;
		font-size: 24rpx;
	}

	.order {
		width: 100%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		border-radius: 10px;
		background-color: white;
	}

	.order-time {
		margin-left: 50rpx;
		display: flex;
		align-items: center;
	}

	.price {
		width: 50%;
	}

	.footer {
		margin-top: 50rpx;
		padding: 0 10px 0 16px;
		position: fixed;
		bottom: 0px;
		width: 100%;
		box-sizing: border-box;
		background-color: hsla(0, 0%, 100%, .85);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border: 1px solid #f0f0f0;
		height: calc(53px + env(safe-area-inset-bottom));
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}
</style>